<template>
  <div class="workbench-container">
    <div class="top-section">
      <!-- 入住信息总览 -->
      <div class="chart-card vacancy-card">
        <div class="card-header">
          <h3>入住信息总览</h3>
          <div class="vacancy-actions">
            <el-button type="primary" size="small" @click="openFilterDialog">筛选</el-button>
            <el-button size="small" @click="resetFilter">重置</el-button>
          </div>
        </div>
        <div class="chart-container">
          <!-- 左侧：合同期限分布柱状图 -->
          <div class="chart-left">
            <div class="chart-title">合同期限分布</div>
            <div class="chart-wrapper-small">
              <v-chart :option="contractChartOption" autoresize />
            </div>
          </div>

          <!-- 中间：空置率饼图 -->
          <div class="chart-middle">
            <div class="chart-wrapper">
              <v-chart :option="vacancyChartOption" autoresize />
            </div>
          </div>

          <!-- 右侧：统计数据 -->
          <div class="chart-right">
            <div class="stat-item">
              <div class="stat-label">总户数</div>
              <div class="stat-value">{{ vacancyData.total }}户</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">业主总数</div>
              <div class="stat-value">{{ ownerCount }}人</div>
            </div>
          </div>
        </div>

        <!-- 底部：空置率信息 -->
        <div class="vacancy-info">
          <div class="info-item">
            <span class="info-label">总计房屋：</span>
            <span class="info-value">{{ vacancyData.total }}套</span>
          </div>
          <div class="info-item">
            <span class="info-label">空置房屋：</span>
            <span class="info-value">{{ vacancyData.vacant }}套</span>
          </div>
          <div class="info-item">
            <span class="info-label">空置率：</span>
            <span class="info-value">{{ vacancyData.rate }}%</span>
          </div>
        </div>
      </div>

      <!-- 缴费完成率统计 -->
      <div class="chart-card payment-card">
        <div class="card-header">
          <h3>缴费完成率</h3>
          <div class="payment-actions">
            <el-select
                v-model="selectedCommunity"
                placeholder="请选择小区"
                size="small"
                @change="onCommunityChangeForPayment">
              <el-option
                  v-for="community in communityOptionsWithAll"
                  :key="community.value"
                  :label="community.label"
                  :value="community.value">
              </el-option>
            </el-select>
            <el-button size="small" @click="resetPaymentFilter">重置</el-button>
          </div>
        </div>
        <div class="chart-wrapper">
          <v-chart :option="paymentChartOption" autoresize />
        </div>
        <!-- 添加统计信息展示 -->
        <div class="payment-info">
          <div class="info-item">
            <span class="info-label">总户数：</span>
            <span class="info-value">{{ paymentData.total }}户</span>
          </div>
          <div class="info-item">
            <span class="info-label">已缴费户数：</span>
            <span class="info-value">{{ paymentData.paid }}户</span>
          </div>
          <div class="info-item">
            <span class="info-label">缴费完成率：</span>
            <span class="info-value">{{ paymentData.rate }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 入住趋势模块 -->
    <div class="trend-section">
      <div class="chart-card trend-card">
        <div class="card-header">
          <h3>入住趋势</h3>
          <div class="trend-actions">
            <el-select
              v-model="trendCommunity"
              placeholder="请选择小区"
              size="small"
              @change="updateTrendChart"
              style="width: 120px; margin-right: 10px;">
              <el-option
                v-for="community in communityOptionsWithAll"
                :key="community.value"
                :label="community.label"
                :value="community.value">
              </el-option>
            </el-select>
            <el-select
              v-model="trendYear"
              placeholder="请选择年份"
              size="small"
              @change="updateTrendChart"
              style="width: 120px; margin-right: 10px;">
              <el-option
                v-for="year in availableYears"
                :key="year"
                :label="year"
                :value="year">
              </el-option>
            </el-select>
            <el-button size="small" @click="resetTrendFilter">重置</el-button>
          </div>
        </div>
        <div class="chart-wrapper">
          <v-chart :option="trendChartOption" autoresize />
        </div>
      </div>
    </div>

    <div class="bottom-section">
      <!-- 缴费待审核通知 -->
      <div class="notification-card" @click="navigateToPaymentAudit">
        <div class="notification-header">
          <h3>缴费待审核</h3>
          <el-badge :value="pendingAuditCount" type="warning" />
        </div>
        <div class="notification-content">
          <div class="notification-item" v-for="item in pendingAuditList" :key="item.id">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-time">{{ item.time }}</span>
          </div>
          <div class="view-all" v-if="pendingAuditList.length > 0">
            查看全部 {{ pendingAuditCount }} 条待审核记录
          </div>
        </div>
      </div>

      <!-- 逾期未缴费提醒 -->
      <div class="notification-card" @click="navigateToOverduePayments">
        <div class="notification-header">
          <h3>逾期未缴费提醒</h3>
          <el-badge :value="overdueCount" type="danger" />
        </div>
        <div class="notification-content">
          <div class="notification-item" v-for="item in overdueList" :key="item.id">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-time">{{ item.time }}</span>
          </div>
          <div class="view-all" v-if="overdueList.length > 0">
            查看全部 {{ overdueCount }} 条逾期记录
          </div>
        </div>
      </div>

      <!-- 空房超三个月未出租提醒 -->
      <div class="notification-card" @click="navigateToVacantHouses">
        <div class="notification-header">
          <h3>空房预警</h3>
          <el-badge :value="longVacantCount" type="info" />
        </div>
        <div class="notification-content">
          <div class="notification-item" v-for="item in longVacantList" :key="item.id">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-time">{{ item.time }}</span>
          </div>
          <div class="view-all" v-if="longVacantList.length > 0">
            查看全部 {{ longVacantCount }} 条记录
          </div>
        </div>
      </div>

      <!-- 缴费到期预警 -->
      <div class="notification-card" @click="navigateToPaymentExpiry">
        <div class="notification-header">
          <h3>缴费到期预警</h3>
          <el-badge :value="expiryWarningCount" type="primary" />
        </div>
        <div class="notification-content">
          <div class="notification-item" v-for="item in expiryWarningList" :key="item.id">
            <span class="item-title">{{ item.title }}</span>
            <span class="item-time">{{ item.time }}</span>
          </div>
          <div class="view-all" v-if="expiryWarningList.length > 0">
            查看全部 {{ expiryWarningCount }} 条预警记录
          </div>
        </div>
      </div>
    </div>

    <!-- 空置率筛选弹窗 -->
    <el-dialog v-model="filterDialogVisible" title="筛选条件" width="500px">
      <el-form>
        <el-form-item label="小区">
          <el-select
            v-model="filterParams.selectedCommunity"
            placeholder="请选择小区"
            @change="onCommunityChange">
            <el-option
              v-for="community in communityOptions"
              :key="community.value"
              :label="community.label"
              :value="community.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="楼栋">
          <el-select
            v-model="filterParams.selectedBuilding"
            placeholder="请选择楼栋"
            :disabled="!filterParams.selectedCommunity"
            @change="onBuildingChange">
            <el-option
              v-for="building in buildingOptions"
              :key="building.value"
              :label="building.label"
              :value="building.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="楼层">
          <el-select
            v-model="filterParams.selectedFloor"
            placeholder="请选择楼层"
            :disabled="!filterParams.selectedBuilding">
            <el-option
              v-for="floor in floorOptions"
              :key="floor.value"
              :label="floor.label"
              :value="floor.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房屋用途">
          <el-checkbox-group v-model="filterParams.houseUsage">
            <el-checkbox label="住宅"></el-checkbox>
            <el-checkbox label="商业"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="filterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="applyFilter">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'HousingManagementWorkbench',
  components: {
    VChart
  },
  data() {
    return {
      pendingAuditCount: 0,
      pendingAuditList: [],
      overdueCount: 0,
      overdueList: [],
      longVacantCount: 0,
      longVacantList: [],
      expiryWarningCount: 0,
      expiryWarningList: [],
      filterDialogVisible: false,
      selectedCommunity: 'all', // 默认选中所有小区
      trendCommunity: 'all', // 入住趋势默认小区，'all'表示所有小区
      trendYear: new Date().getFullYear(), // 入住趋势默认年份
      filterParams: {
        selectedCommunity: '',
        selectedBuilding: '',
        selectedFloor: '',
        houseUsage: ['住宅', '商业'] // 默认选中所有
      },
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      ownerCount: 1950, // 业主总数
      // 模拟的选项数据
      communityOptions: [
        { value: 'community1', label: '阳光小区' },
        { value: 'community2', label: '绿城小区' },
        { value: 'community3', label: '碧桂小区' }
      ],
      buildingOptions: [
        { value: 'building1', label: '1栋' },
        { value: 'building2', label: '2栋' },
        { value: 'building3', label: '3栋' }
      ],
      floorOptions: [
        { value: 'floor1', label: '1层' },
        { value: 'floor2', label: '2层' },
        { value: 'floor3', label: '3层' },
        { value: 'floor4', label: '4层' }
      ],
      // 可选年份
      availableYears: [
        new Date().getFullYear() - 2,
        new Date().getFullYear() - 1,
        new Date().getFullYear(),
        new Date().getFullYear() + 1
      ],
      // 空置率数据
      vacancyData: {
        total: 1000,
        vacant: 300,
        rate: 30
      },
      // 缴费完成率数据
      paymentData: {
        total: 900,
        paid: 765,
        rate: 85
      },
      // 合同期限分布数据
      contractTermData: {
        terms: ['1年', '2年', '3年', '4年', '5年'],
        counts: [120, 200, 300, 250, 130]
      },
      // 各小区楼栋缴费数据
      communityPaymentData: {
        'community1': {
          buildings: ['1栋', '2栋', '3栋', '4栋', '5栋'],
          rates: [85, 90, 80, 75, 95],
          totals: [60, 60, 60, 60, 60],
          paids: [51, 54, 48, 45, 57]
        },
        'community2': {
          buildings: ['A栋', 'B栋', 'C栋'],
          rates: [75, 85, 90],
          totals: [100, 100, 100],
          paids: [75, 85, 90]
        },
        'community3': {
          buildings: ['甲栋', '乙栋', '丙栋', '丁栋'],
          rates: [80, 88, 92, 78],
          totals: [75, 75, 75, 75],
          paids: [60, 66, 69, 59]
        }
      },
      // 所有小区缴费数据
      allCommunityPaymentData: {
        communities: ['阳光小区', '绿城小区', '碧桂小区'],
        rates: [85, 83, 87],
        totals: [300, 300, 300],
        paids: [255, 249, 261]
      },
      // 各小区入住趋势数据（按月）
      communityTrendData: {
        'community1': {
          [new Date().getFullYear() - 2]: [75, 76, 78, 77, 79, 80, 82, 81, 83, 84, 85, 86],
          [new Date().getFullYear() - 1]: [86, 87, 88, 89, 88, 90, 91, 92, 91, 93, 94, 95],
          [new Date().getFullYear()]: [95, 94, 96, 95, 97, 96, 98, 97, 98, 99, 98, 99],
          [new Date().getFullYear() + 1]: [99, 98, 99, 98, 99, 98, 99, 98, 99, 98, 99, 98]
        },
        'community2': {
          [new Date().getFullYear() - 2]: [70, 72, 71, 73, 74, 75, 76, 77, 78, 79, 80, 81],
          [new Date().getFullYear() - 1]: [81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92],
          [new Date().getFullYear()]: [92, 91, 93, 92, 94, 93, 95, 94, 96, 95, 97, 96],
          [new Date().getFullYear() + 1]: [96, 97, 96, 98, 97, 99, 98, 100, 99, 100, 99, 100]
        },
        'community3': {
          [new Date().getFullYear() - 2]: [65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76],
          [new Date().getFullYear() - 1]: [76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87],
          [new Date().getFullYear()]: [87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98],
          [new Date().getFullYear() + 1]: [98, 97, 98, 97, 98, 97, 98, 97, 98, 97, 98, 97]
        }
      },
      // 所有小区平均入住率数据
      allCommunityTrendData: {
        [new Date().getFullYear() - 2]: [70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81],
        [new Date().getFullYear() - 1]: [81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92],
        [new Date().getFullYear()]: [91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 97, 99],
        [new Date().getFullYear() + 1]: [99, 98, 99, 98, 99, 98, 99, 98, 99, 98, 99, 98]
      },
      vacancyChartOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '空置率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 70, name: '已入住' },
              { value: 30, name: '空置' }
            ]
          }
        ]
      },
      contractChartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1年', '2年', '3年', '4年', '5年'],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 户'
          }
        },
        series: [
          {
            name: '户数',
            type: 'bar',
            barWidth: '60%',
            data: [120, 200, 300, 250, 130],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#409EFF' // 蓝色
                }, {
                  offset: 1, color: '#64B5F6' // 浅蓝色
                }]
              }
            }
          }
        ]
      },
      paymentChartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['阳光小区', '绿城小区', '碧桂小区'],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '缴费完成率',
            type: 'bar',
            barWidth: '60%',
            data: [85, 83, 87],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#409EFF' // 蓝色
                }, {
                  offset: 1, color: '#64B5F6' // 浅蓝色
                }]
              }
            }
          }
        ]
      },
      trendChartOption: {
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            const param = params[0];
            const month = param.name;
            const rate = param.value;
            return `${this.trendYear}年${month}<br/>入住率: ${rate}%`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          boundaryGap: false
        },
        yAxis: {
          max: 100,
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '入住率',
            type: 'line',
            data: [91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 97, 99],
            smooth: true,
            itemStyle: {
              color: '#409EFF'
            },
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(64, 158, 255, 0.3)'
                }, {
                  offset: 1, color: 'rgba(64, 158, 255, 0.05)'
                }]
              }
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
    }
  },
  computed: {
    // 包含"所有小区"选项的小区列表
    communityOptionsWithAll() {
      return [
        { value: 'all', label: '所有小区' },
        ...this.communityOptions
      ];
    }
  },
  mounted() {
    this.loadNotificationData()
    this.updatePaymentChart()
    this.updateTrendChart()
  },
  methods: {
    loadVacancyData() {
      // 根据选择的范围加载空置率数据
      console.log('加载空置率数据')

      // 模拟不同筛选条件下的数据
      const data = { total: 1000, vacant: 300, rate: 30 }
      this.vacancyChartOption.series[0].data = [
        { value: 700, name: '已入住' },
        { value: 300, name: '空置' }
      ]

      this.vacancyData = data
    },

    updatePaymentChart() {
      // 更新缴费完成率图表数据
      if (this.selectedCommunity === 'all') {
        // 显示所有小区的数据
        this.paymentChartOption.xAxis.data = this.allCommunityPaymentData.communities;
        this.paymentChartOption.series[0].data = this.allCommunityPaymentData.rates;

        // 更新统计信息
        this.paymentData.total = this.allCommunityPaymentData.totals.reduce((a, b) => a + b, 0);
        this.paymentData.paid = this.allCommunityPaymentData.paids.reduce((a, b) => a + b, 0);
        this.paymentData.rate = Math.round(
          this.allCommunityPaymentData.rates.reduce((a, b) => a + b, 0) / this.allCommunityPaymentData.rates.length
        );
      } else {
        // 显示单个小区各楼栋的数据
        const communityData = this.communityPaymentData[this.selectedCommunity];
        this.paymentChartOption.xAxis.data = communityData.buildings;
        this.paymentChartOption.series[0].data = communityData.rates;

        // 更新统计信息
        this.paymentData.total = communityData.totals.reduce((a, b) => a + b, 0);
        this.paymentData.paid = communityData.paids.reduce((a, b) => a + b, 0);
        this.paymentData.rate = Math.round(
          communityData.rates.reduce((a, b) => a + b, 0) / communityData.rates.length
        );
      }
    },

    updateTrendChart() {
      let trendData;
      let trendMonths;

      // 如果选择的是"所有小区"，则使用平均数据
      if (this.trendCommunity === 'all') {
        trendData = this.allCommunityTrendData[this.trendYear];
      } else {
        // 否则使用特定小区的数据
        trendData = this.communityTrendData[this.trendCommunity][this.trendYear];
      }

      // 确保入住率不超过100%
      trendData = trendData.map(rate => Math.min(rate, 100));

      // 如果选择的年份是当前年份，则只显示到当前月份的数据
      if (this.trendYear === this.currentYear) {
        // 截取到当前月份的数据
        trendData = trendData.slice(0, this.currentMonth);
        // 月份标签也只显示到当前月份
        const allMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        trendMonths = allMonths.slice(0, this.currentMonth);
      } else if (this.trendYear > this.currentYear) {
        // 如果选择的年份大于当前年份，不显示任何数据
        trendData = [];
        trendMonths = [];
      } else {
        // 如果选择的年份小于当前年份，显示全年数据
        trendMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      }

      // 更新图表数据
      this.trendChartOption.series[0].data = trendData;
      this.trendChartOption.xAxis.data = trendMonths;
    },

    // 重置缴费完成率筛选条件
    resetPaymentFilter() {
      this.selectedCommunity = 'all'; // 恢复默认值为所有小区
      this.updatePaymentChart();
    },

    // 重置入住趋势筛选条件
    resetTrendFilter() {
      this.trendCommunity = 'all';
      this.trendYear = this.currentYear;
      this.updateTrendChart();
    },

    onCommunityChangeForPayment() {
      this.updatePaymentChart();
    },

    loadNotificationData() {
      // 模拟加载通知数据
      this.pendingAuditCount = 12
      this.pendingAuditList = [
        { id: 1, title: '张三 - 2023年物业费', time: '2023-06-15' },
        { id: 2, title: '李四 - 停车费', time: '2023-06-14' },
        { id: 3, title: '王五 - 维修基金', time: '2023-06-13' }
      ]

      this.overdueCount = 8
      this.overdueList = [
        { id: 1, title: '赵六 - 物业费逾期', time: '2023-06-01' },
        { id: 2, title: '孙七 - 水费逾期', time: '2023-05-28' },
        { id: 3, title: '周八 - 电费逾期', time: '2023-05-25' }
      ]

      // 加载空房超三个月未出租数据
      this.longVacantCount = 5
      this.longVacantList = [
        { id: 1, title: '阳光小区 1栋101', time: '空置120天' },
        { id: 2, title: '绿城小区 A栋202', time: '空置105天' },
        { id: 3, title: '碧桂小区 甲栋303', time: '空置98天' }
      ]

      // 加载缴费到期预警数据
      this.expiryWarningCount = 7
      this.expiryWarningList = [
        { id: 1, title: '张三 - 物业费即将到期', time: '2023-07-15到期' },
        { id: 2, title: '李四 - 水费即将到期', time: '2023-07-20到期' },
        { id: 3, title: '王五 - 电费即将到期', time: '2023-07-25到期' }
      ]
    },

    navigateToPaymentAudit() {
      // 跳转到缴费审核组件
      this.$router.push('/housing/payment/audit')
    },

    navigateToOverduePayments() {
      // 跳转到缴费记录组件并筛选逾期记录
      this.$router.push({
        path: '/housing/payment/records',
        query: { status: 'overdue' }
      })
    },

    // 跳转到房屋管理组件查看超三个月未出租的房屋
    navigateToVacantHouses() {
      // 跳转到房屋管理组件并筛选空置超过三个月的房屋
      this.$router.push({
        path: '/housing/house-management',
        query: { status: 'vacant', days: '90' }
      })
    },

    // 跳转到缴费信息组件查看缴费到期预警详情
    navigateToPaymentExpiry() {
      // 跳转到缴费记录组件并筛选即将到期的记录
      this.$router.push({
        path: '/housing/payment/records',
        query: { status: 'expiring' }
      })
    },

    // 打开筛选弹窗
    openFilterDialog() {
      this.filterDialogVisible = true;
    },

    // 小区选择变化时的处理
    onCommunityChange() {
      // 清空楼栋和楼层的选择
      this.filterParams.selectedBuilding = '';
      this.filterParams.selectedFloor = '';
    },

    // 楼栋选择变化时的处理
    onBuildingChange() {
      // 清空楼层的选择
      this.filterParams.selectedFloor = '';
    },

    // 应用筛选条件
    applyFilter() {
      // 检查是否选择了房屋用途
      if (!this.filterParams.houseUsage || this.filterParams.houseUsage.length === 0) {
        this.$message.warning('请至少选择一种房屋用途');
        return;
      }

      // 根据筛选条件更新数据
      let vacancyData = {};
      let vacancyChartData = [];
      let contractData = [];

      // 根据选择的条件生成数据
      if (this.filterParams.selectedFloor) {
        // 选择了楼层
        vacancyData = { total: 40, vacant: 12, rate: 30 };
        vacancyChartData = [
          { value: 28, name: '已入住' },
          { value: 12, name: '空置' }
        ];
        contractData = [5, 10, 15, 8, 2]; // 模拟合同期限分布数据
      } else if (this.filterParams.selectedBuilding) {
        // 选择了楼栋
        vacancyData = { total: 200, vacant: 60, rate: 30 };
        vacancyChartData = [
          { value: 140, name: '已入住' },
          { value: 60, name: '空置' }
        ];
        contractData = [30, 50, 70, 40, 10]; // 模拟合同期限分布数据
      } else if (this.filterParams.selectedCommunity) {
        // 选择了小区
        vacancyData = { total: 1200, vacant: 360, rate: 30 };
        vacancyChartData = [
          { value: 840, name: '已入住' },
          { value: 360, name: '空置' }
        ];
        contractData = [100, 180, 250, 200, 80]; // 模拟合同期限分布数据
      } else {
        // 没有选择具体区域，使用默认数据
        vacancyData = { total: 1000, vacant: 300, rate: 30 };
        vacancyChartData = [
          { value: 700, name: '已入住' },
          { value: 300, name: '空置' }
        ];
        contractData = [120, 200, 300, 250, 130]; // 使用默认合同期限分布数据
      }

      this.vacancyData = vacancyData;
      this.vacancyChartOption.series[0].data = vacancyChartData;
      this.contractChartOption.series[0].data = contractData;
      this.filterDialogVisible = false;
    },

    // 重置筛选条件
    resetFilter() {
      this.filterParams.selectedCommunity = '';
      this.filterParams.selectedBuilding = '';
      this.filterParams.selectedFloor = '';
      this.filterParams.houseUsage = ['住宅', '商业'];
      this.loadVacancyData();

      // 重置合同期限分布图数据
      this.contractChartOption.series[0].data = [120, 200, 300, 250, 130];
    }
  }
}
</script>

<style scoped>
.workbench-container {
  padding: 20px;
  background-color: rgba(255,255,255,1);
  //min-height: calc(100vh - 84px);
}

.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.trend-section {
  margin-bottom: 20px;
}

.bottom-section {
  display: flex;
  gap: 20px;
}

.chart-card, .notification-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s;
}

.chart-card:hover, .notification-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.vacancy-card, .payment-card, .trend-card {
  flex: 1;
}

.notification-card {
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.vacancy-actions, .payment-actions, .trend-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chart-container {
  display: flex;
  height: 250px;
  margin-bottom: 15px;
}

.chart-left, .chart-middle, .chart-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chart-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  text-align: center;
}

.chart-wrapper {
  flex: 1;
  height: 264px;
  width: 100%;
}

.chart-wrapper-small {
  flex: 1;
  width: 100%;
  max-height: 180px;
}

.stat-item {
  text-align: center;
  margin-bottom: 20px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.vacancy-info, .payment-info {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.info-item {
  text-align: center;
}

.info-label {
  font-size: 14px;
  color: #666;
}

.info-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.notification-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.notification-content {
  cursor: pointer;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.notification-item:last-child {
  border-bottom: none;
}

.item-title {
  font-size: 14px;
  color: #666;
}

.item-time {
  font-size: 12px;
  color: #999;
}

.view-all {
  text-align: center;
  padding: 10px 0;
  color: #409EFF;
  font-size: 14px;
  margin-top: 10px;
}

/* 在小高度屏幕上隐藏详细内容，只显示标题和信息数量 */
@media (max-height: 1260px) {
  .notification-content .notification-item,
  .notification-content .view-all {
    display: none;
  }

  /* 确保卡片在只显示标题时有合适的高度 */
  .notification-card {
    min-height: 20px;
  }
}

</style>
